<template>
  <!-- 下拉菜单
        el-dropdown
            默认插槽
            具名插槽(dropdown)
               el-dropdown-menu
                  el-dropdown-item

        查：
          1：定义api
          2: 导入api
          3: 进入页面请求api获取数据
          4：存储并渲染

        增：
          1：创建一个新增弹框组件
          2：在父组件导入注册使用
          3：完成弹框组件布局
          4：完成内部表单验证
          5：定义新增api
          6:导入新增api
          7:点击确定在表单验证通过后调用api
          8:调用成功
            a:提示
            b:关闭弹框
            c:清空表单验证与数据
            d:刷新父级列表数据

        删：
         1：点击删除按钮弹出确定框
         2：定义删除api
         3:导入删除api
         4:确定框点击确定时调用删除api
         5:调用成功
            a:提示
            b:刷新列表数据

        改：
         1：点击编辑按钮打开弹框
         2：回显弹框表单数据
         3：弹框组件内定义mode,新增与编辑点击时都修改相应mode
         4:标题调整
         5：表单验证分场景调用
         6：定义编辑api
         7:导入编辑api
         8:点击确定分场景调用api
         9:调用成功
            a:提示
            b:关闭弹框
            c:刷新列表数据
            d:有编辑时清空表单数据要手动清空

 -->
  <div class="departments">
    <el-card v-loading="loading">
      <div class="main">
        <div class="top">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <div class="option">
            <el-dropdown>
              <span>
                操作
                <i class="el-icon-arrow-down" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="addEvent('')">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <el-tree class="tree" :data="list" :props="{label:'name',children:'children'}">
          <template #default="{data}">
            <div class="top" style="width:100%;">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <div class="option">
                <el-dropdown>
                  <span>
                    操作
                    <i class="el-icon-arrow-down" />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click.native="addEvent(data.id)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="editEvent(data)">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="delEvent(data.id)">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/Add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      loading: false,
      list: [],
      initList: []
    }
  },
  async  created() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      const res = await companyDepartment()
      this.loading = false
      // 原始列表数组（非树形结构）
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      console.table(res.data.depts)
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 1:找出第一层数据
      // 2:pid写成形参
      // 3:给找出的数据加入children=[]
      // 4:使用递归找出子集（子集的pid是自己当前项的id）
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增事件
    addEvent(id) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 修改add弹框组件的pid
      this.$refs.add.form.pid = id
      // 修改mode值
      this.$refs.add.mode = 'add'
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await companyDepartmentDelete(id)
      this.$message.success('删除成功')
      this.getData()
    },
    // 编辑事件
    editEvent(data) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 回显数据(深拷贝)
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
      // 修改mode值
      this.$refs.add.mode = 'edit'
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments{
  padding:20px;
  .main{
    width:80%;
    margin:30px auto;
    .top{
      display: flex;
      .name{flex:1}
      .manager{width:100px;}
    }
    .tree{
      margin-top:15px;
    }
  }

}
</style>
